<template>
  <div>
    <div class="unified-template" id='unified-template' v-title data-title="楼盘列表">
      <div class="apollo-filter-bar" style="display: none">
        <div class="apollo-filter-bar-item" :class="{'apollo-filter-bar-item-active': selectAreaBar}" @click="selectArea">
          <span class="apollo-filter-bar-item-text">区域范围</span>
          <div class="apollo-filter-bar-triangle"></div>
        </div>
        <div class="apollo-filter-bar-item" :class="{'apollo-filter-bar-item-active': selectPriceBar}" @click="selectPrice">
          <span class="apollo-filter-bar-item-text">均价范围</span>
          <div class="apollo-filter-bar-triangle"></div>
        </div>
        <div class="apollo-filter-bar-item" :class="{'apollo-filter-bar-item-active': selectPropertyBar}" @click="selectProperty">
          <span class="apollo-filter-bar-item-text">物业类型</span>
          <div class="apollo-filter-bar-triangle"></div>
        </div>
      </div>
      <!-- 区域筛选 start -->
      <div class="col-sm-12 area-location" id="location">
        <!-- 区域定位 -->
        <div v-show="!isSearch">
          <div class="col-sm-8 bor-r"><i class="position-icon fa fa-map-marker" aria-hidden="true"></i><a @click="areaSelectShow = !areaSelectShow"><span>{{provinceName}}{{cityName}}{{areaName}}</span></a>
            <!-- 区域选择 start -->
            <div class="area-select" v-show="areaSelectShow">
              <div class="area-select-sub borer-right">
                <ul>
                  <li v-for="(item, index) in cityList" @click="getAreaByCity(item,true);citySelectIndex=index" :class="citySelectIndex==index?'color-orange':''">{{item.cityName}}(<span>{{item.premisesCount}}</span>)</li>
                </ul>
              </div>
              <div class="area-select-sub border-left">
                <i class="fold fa fa-times" @click="areaSelectShow=false"></i>
                <ul>
                  <li v-for="(item, index) in areaList" @click="getPremisesWithArea(item)">{{item.areaName}}(<span>{{item.premisesCount}}</span>)</li>
                </ul>
              </div>
            </div>
            <!-- 区域选择 end -->
          </div>
          <div class="col-sm-4 text-center"><button class="location-btn" @click="showSelect">筛选</button></div>
        </div>
        <!-- 区域定位 end-->
      </div>
      <!-- 区域筛选 end-->
      <div v-show="selectAreaBar">
        <div class="apollo-mobile-modal-mask" style="margin-top: 46px;" @click="closeMark"></div>
        <div class="apollo-mobile-modal-wrap apollo-mobile-modal-wrap-popup" role="dialog">
          <div role="document" class="apollo-mobile-modal apollo-mobile-modal-popup apollo-mobile-modal-popup-slide-down" style="">
            <div class="apollo-mobile-modal-content">
              <div class="apollo-mobile-modal-body" style="max-height: 215px;">
                <div class="apollo-cascading-menu">
                  <div class="apollo-mobile-list" style="border-right: 1px solid #d5d5d5">
                    <div class="apollo-mobile-list-body" v-for="(item, index) in cityList" :key="index" @click="checkedCity(item, index)">
                      <div class="apollo-mobile-list-item apollo-mobile-list-item-middle" style="" :class="{'apollo-cascading-menu-item-checked': index === activeIndex}">
                        <div class="apollo-mobile-list-line">
                          <div class="apollo-mobile-list-content">{{item.cityName}}</div>
                        </div>
                        <div class="apollo-mobile-list-ripple" style="display: none;"></div>
                      </div>
                    </div>
                  </div>
                  <div class="apollo-mobile-list">
                    <div class="apollo-mobile-list-body" v-for="(item, index) in areaList" :key="index" @click="checkedArea(item, index)">
                      <div class="apollo-mobile-list-item apollo-mobile-list-item-middle" :class="{'apollo-cascading-menu-item-checked': index === areaCheckIndex}">
                        <div class="apollo-mobile-list-line">
                          <div class="apollo-mobile-list-content">{{item.name}}</div>
                        </div>
                        <div class="apollo-mobile-list-ripple" style="display: none;"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="selectPriceBar">
        <div class="apollo-mobile-modal-mask" style="margin-top: 46px;" @click="closeMark"></div>
        <div class="apollo-mobile-modal-wrap apollo-mobile-modal-wrap-popup" role="dialog">
          <div role="document" class="apollo-mobile-modal apollo-mobile-modal-popup apollo-mobile-modal-popup-slide-down" style="">
            <div class="apollo-mobile-modal-content">
              <div class="apollo-mobile-modal-body" style="max-height: 215px;">
                <div class="apollo-mobile-list">
                  <div class="apollo-mobile-list-body">
                    <div class="apollo-mobile-list-item apollo-mobile-checkbox-item apollo-mobile-list-item-middle" :class="{'apollo-mobile-checkbox-item-checked': index === priceActiveindex}" @click="checkedSel(index)" v-for="(item, index) in priceList" :key="index">
                      <div class="apollo-mobile-list-line" @click="checkedPrice(item)">
                        <div class="apollo-mobile-list-content">{{item.label}}</div>
                        <div class="apollo-mobile-list-extra">
                          <label class="apollo-mobile-checkbox-wrapper">
                            <span class="apollo-mobile-checkbox" :class="{'apollo-mobile-checkbox-checked': index === priceActiveindex }">
                              <input type="checkbox" class="apollo-mobile-checkbox-input" value="on">
                              <span class="apollo-mobile-checkbox-inner"></span>
                            </span>
                          </label>
                        </div>
                      </div>
                      <div class="apollo-mobile-list-ripple" style="display: none;"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="selectPropertyBar">
        <div class="apollo-mobile-modal-mask" style="margin-top: 46px;" @click="closeMark"></div>
        <div class="apollo-mobile-modal-wrap apollo-mobile-modal-wrap-popup" role="dialog">
          <div role="document" class="apollo-mobile-modal apollo-mobile-modal-popup apollo-mobile-modal-popup-slide-down" style="">
            <div class="apollo-mobile-modal-content">
              <div class="apollo-mobile-modal-body" style="max-height: 215px;">
                <div class="apollo-mobile-list">
                  <div class="apollo-mobile-list-body">
                    <div class="apollo-mobile-list-item apollo-mobile-checkbox-item apollo-mobile-list-item-middle" :class="{'apollo-mobile-checkbox-item-checked': index === propertyActiveIndex}" @click="checkedPropertySel(index)" v-for="(item, index) in propertyList" :key="index">
                      <div class="apollo-mobile-list-line" @click="checkedEstateType(item)">
                        <div class="apollo-mobile-list-content">{{item.label}}</div>
                        <div class="apollo-mobile-list-extra">
                          <label class="apollo-mobile-checkbox-wrapper">
                            <span class="apollo-mobile-checkbox" :class="{'apollo-mobile-checkbox-checked': index === propertyActiveIndex }">
                              <input type="checkbox" class="apollo-mobile-checkbox-input" value="on">
                              <span class="apollo-mobile-checkbox-inner"></span>
                            </span>
                          </label>
                        </div>
                      </div>
                      <div class="apollo-mobile-list-ripple" style="display: none;"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="city-info-list">
        <li v-for="(item, index) in premisesList">
          <div class="residential-details">
            <div class="residential-img" @click="toPremisesDetail(item.id)">
              <img :src="item.url">
              <div class="residential-mask"></div>
              <div class="residential-mask-info">
                <div class="col-sm-6 name">[ {{item.area.name}} ] {{item.name}}</div>
                <div class="col-sm-6 square">{{item.averagePrice}}&nbsp;元/平米</div>
              </div>
              <a href="javascript:;" class="sale">{{item.saleStatusName}}</a>
              <span class="main-push-left" v-if="item.mainPush==2">主推楼盘</span>
            </div>

          </div>
        </li>
      </ul>
      <mugen-scroll :handler="getPremisesList" :should-handle="!loading">
      </mugen-scroll>
    </div>
    <Select ref="select" v-show="choice" v-on:getPremises="getPremisesWithPriceAndProperty"></Select>
  </div>
</template>

<script>
import MugenScroll from "vue-mugen-scroll";
import Select from "../base/select.vue";
import wx from "weixin-js-sdk";
export default {
  name: "premises-list",
  data() {
    return {
      params: {
        pageSize: 5,
        pageNo: 0,
        cityId: "",
        areaId: "",
      },
      cityName: "全部城市",
      customer: {
        totalAmount: 0,
        reportCount: 0,
        commissionAmount: 0.0,
      },
      member: {
        accountName: window.localStorage.getItem("2_userName"),
        accountId: window.localStorage.getItem("2_userId"),
      },
      premisesList: [],
      loading: false,
      selectPriceBar: false,
      selectAreaBar: false,
      selectPropertyBar: false,

      checkedPriceItem: false,
      propertyList: [{ label: "不限", value: "" }],
      priceList: [
        { label: "不限", value: "" },
        { label: "1万以下", value: "<=10000" },
        { label: "1-2万", value: "10000-20000" },
        { label: "2-3万", value: "20000-30000" },
        { label: "3-4万", value: "30000-40000" },
        { label: "4-5万", value: "40000-50000" },
        { label: "5-8万", value: "50000-80000" },
        { label: "8-10万", value: "80000-100000" },
        { label: "10-15万", value: "100000-150000" },
        { label: "15万以上", value: ">150000" },
      ],
      cityList: [],
      areaList: [{ name: "不限", id: "" }],
      activeIndex: -1,
      priceActiveindex: -1,
      propertyActiveIndex: -1,
      areaCheckIndex: -1,
      distanceHeight: false,
      areaSelectShow: false,
      lastPremisesCityId: "",
      lastPremisesAreaId: "",
    };
  },
  components: {
    MugenScroll,
    Select,
  },
  mounted: function() {
    this.wxConfig();
    this.initEstateTypeEnums();
    this.initPremisesCityList();
    this.getPartnerInfo();
    this.bodyInit();
  },
  methods: {
    initEstateTypeEnums: function() {
      var _self = this;
      var body = {};
      body.params = {};
      var url = this.utilHelper.apiUrl + "/common/getEnum/EstateTypeEnum";
      _self.$http.get(url, body).then((response) => {
        var body = response.body.data;
        Object.keys(body).forEach(function(key) {
          var estateType = {};
          estateType.label = body[key];
          estateType.value = key;
          _self.propertyList.push(estateType);
        });
      });
    },
    initPremisesCityList: function() {
      var _self = this;
      var body = {};
      body.params = {};
      var url = this.utilHelper.apiUrl + "/api/getPremisesCityGroupList";
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        if (body.result == 1) {
          var premisesCityList = body.resData.premisesCityList;
          _self.lastPremisesCityId = body.resData.cityId;
          _self.lastPremisesAreaId = body.resData.areaId;
          if (premisesCityList) {
            for (var ii = 0; ii < premisesCityList.length; ii++) {
              _self.cityList.push(premisesCityList[ii]);
            }
            _self.initWeixin();
          }
        } else {
        }
      });
    },
    closeMark: function() {
      this.selectPriceBar = false;
      this.selectAreaBar = false;
      this.selectPropertyBar = false;
    },
    checkedCity: function(item, index) {
      this.activeIndex = index;
      var _self = this;
      var cityId = item.cityId;
      var cityName = item.cityName;
      var _self = this;
      _self.areaList = [{ id: "", name: "不限" }];
      _self.params.pageNo = 0;
      _self.params.pageSize = 15;
      _self.params.cityId = "";
      _self.params.areaId = "";
      if (cityId) {
        //选择测试查询数据
        _self.params.cityId = cityId;
        var body = {};
        body.params = { areaId: cityId, userId: "-1" };
        var url = this.utilHelper.apiUrl + "/api/getArea";
        _self.$http.post(url, body).then((response) => {
          var body = response.body;
          if (body.result == 1) {
            var areaResList = body.resData.areaList;
            if (areaResList) {
              for (var ii = 0; ii < areaResList.length; ii++) {
                _self.areaList.push(areaResList[ii]);
              }
            }
          } else {
          }
        });
      }
      //重新加载楼盘信息
      _self.premisesList = [];
      _self.getPremisesList();
    },
    checkedArea: function(item, index) {
      this.areaCheckIndex = index;
      this.selectAreaBar = false;
      var _self = this;
      var areaId = item.id;
      var _self = this;
      _self.params.pageNo = 0;
      _self.params.pageSize = 15;
      _self.params.areaId = "";
      if (areaId) {
        _self.params.areaId = areaId;
      }
      //重新加载楼盘信息
      _self.premisesList = [];
      _self.getPremisesList();
    },
    checkedPrice: function(item) {
      var _self = this;
      var averagePrice = item.value;
      var _self = this;
      _self.params.pageNo = 0;
      _self.params.pageSize = 15;
      _self.params.averagePrice = "";
      if (averagePrice) {
        _self.params.averagePrice = averagePrice;
      }
      //重新加载楼盘信息
      _self.premisesList = [];
      _self.getPremisesList();
    },
    checkedEstateType: function(item) {
      var _self = this;
      var estateType = item.value;
      var _self = this;
      _self.params.pageNo = 0;
      _self.params.pageSize = 15;
      _self.params.estateType = "";
      if (estateType) {
        _self.params.estateType = estateType;
      }
      //重新加载楼盘信息
      _self.premisesList = [];
      _self.getPremisesList();
    },
    checkedSel: function(index) {
      this.priceActiveindex = index;
      this.selectPriceBar = false;
    },
    checkedPropertySel: function(index) {
      this.propertyActiveIndex = index;
      this.selectPropertyBar = false;
    },
    colseCitySel: function() {
      this.selectAreaBar = false;
    },
    selectPrice: function() {
      this.selectPriceBar = !this.selectPriceBar;
      this.selectAreaBar = false;
      this.selectPropertyBar = false;
    },
    selectArea: function() {
      this.selectPriceBar = false;
      this.selectAreaBar = !this.selectAreaBar;
      this.selectPropertyBar = false;
    },
    selectProperty: function() {
      this.selectPriceBar = false;
      this.selectAreaBar = false;
      this.selectPropertyBar = !this.selectPropertyBar;
    },
    //实时获取用户信息
    getPartnerInfo() {
      var userId = window.localStorage.getItem("2_isLogin");
      if (!userId) {
        //用户未登录时，直接返回
        return;
      }
      var _self = this;
      var body = {};
      body.params = {};
      var url = this.utilHelper.apiUrl + "/api/getUserById";
      _self.$http.post(url, body).then((response) => {
        var data = response.body.resData;
        var result = data.result;
        if (result == "1") {
          window.localStorage.setItem("2_isLogin", true);
          window.localStorage.setItem("2_userId", data.id);
          window.localStorage.setItem("2_userName", data.accountName);
          window.localStorage.setItem("2_phone", data.phone);
          window.localStorage.setItem("2_isLogin", true);
          window.localStorage.setItem("2_userRole", data.userRoleId);
          window.localStorage.setItem("2_accountType", data.accountType);
        }
      });
    },
    getPremisesList: function() {
      var userId = window.localStorage.getItem("2_isLogin");
      var index = layer.load();
      var _self = this;
      _self.loading = true;

      _self.params.pageNo = _self.params.pageNo + 1;
      _self.params.premisesSaleStatus = ["0", "1"];
      var body = {};
      body.params = _self.params;
      var url = _self.utilHelper.apiUrl + "/api/getPremisesPage";

      _self.$http.post(url, body).then((response) => {
        layer.close(index);
        var body = response.body;
        if (body.result == "1") {
          var rows = body.resData.getPremisesPage.rows;
          var total = body.resData.getPremisesPage.totalPages;
          var current = body.resData.getPremisesPage.pageNumber;
          if (_self.params.pageNo > total) {
            _self.loading = true;
          } else {
            _self.loading = false;
          }
          for (var i = 0; i < rows.length; i++) {
            rows[i].averagePrice = _self.setAveragePrice(rows[i].averagePrice);
            rows[i].url = _self.setPremisesImg(rows[i].url);
            _self.premisesList.push(rows[i]);
          }
        }
      });
    },

    toPremisesDetail(id) {
      this.$router.replace({
        path: "/premisesDetail/" + id,
      });
    },
    changeToDecimal(value, point) {
      var f_x = parseFloat(value);
      if (isNaN(f_x)) {
        value = "0";
      }
      var f_x = Math.round(value * 100) / 100;
      var s_x = f_x.toString();
      var pos_decimal = s_x.indexOf(".");
      if (pos_decimal < 0) {
        pos_decimal = s_x.length;
        s_x += ".";
      }
      while (s_x.length <= pos_decimal + point) {
        s_x += "0";
      }
      return s_x;
    },
    //初次进入要显示提示
    //设置均价
    setAveragePrice(averagePrice) {
      if (averagePrice) {
        let price = averagePrice.split(",");
        if (price.length > 1) {
          if (price[0] && price[1]) {
            averagePrice = price[0] + " 至 " + price[1];
          } else if (price[0]) {
            averagePrice = price[0];
          } else if (price[1]) {
            averagePrice = price[1];
          }
        }
      }
      return averagePrice;
    },
    //设置列表图片
    setPremisesImg(imgUrl) {
      var index = imgUrl.lastIndexOf(".");
      return (
        imgUrl.substring(0, index) +
        "-m" +
        imgUrl.substring(index, imgUrl.length)
      );
    },

    ///////////////////////////////////////////////////////新增代码///////////////////////////////////////////////////////////////////////////////////////
    showSelect() {
      $("#choiceModel").show();
    },
    bodyInit() {
      var tit = document.getElementById("location");
      //alert(tit);
      //占位符的位置
      var rect = tit.getBoundingClientRect(); //获得页面中导航条相对于浏览器视窗的位置
      // var inser = document.createElement("div");
      // tit.parentNode.replaceChild(inser,tit);
      // inser.appendChild(tit);
      // inser.style.height = rect.height + "px";

      //获取距离页面顶端的距离
      var titleTop = tit.offsetTop;
      //滚动事件
      document.onscroll = function() {
        //获取当前滚动的距离
        var btop =
          document.body.scrollTop || document.documentElement.scrollTop;
        //如果滚动距离大于导航条据顶部的距离
        if (btop > titleTop) {
          //为导航条设置fix
          tit.className = "col-sm-12 area-location fix";
        } else {
          //移除fixed
          tit.className = "col-sm-12 area-location";
        }
      };
    },
    getPremisesWithPriceAndProperty(params) {
      var _self = this;
      var averagePrice = params.price;
      var estateType = params.property;
      var _self = this;
      _self.params.pageNo = 0;
      _self.params.pageSize = 15;
      _self.params.averagePrice = "";
      _self.params.estateType = "";
      if (averagePrice) {
        _self.params.averagePrice = averagePrice;
      }
      if (estateType) {
        _self.params.estateType = estateType;
      }

      //重新加载楼盘信息
      _self.premisesList = [];
      _self.getPremisesList();
      $("#choiceModel").hide();
    },
    getAreaByCity(city, isClick) {
      var _self = this;
      var body = {};
      body.params = {
        cityId: city.cityId,
      };
      var url = this.utilHelper.apiUrl + "/api/getAreaAndPremisesCount";
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        var resData = body.resData;
        _self.areaList = resData.premisesAreaList;

        _self.params.cityId = city.cityId;
        _self.params.areaId = "";
        _self.cityName = city.cityName;
        _self.areaName = "";
        _self.provinceName = "";
        //匹配区域
        if (city.areaName) {
          for (var i in resData.premisesAreaList) {
            if (
              resData.premisesAreaList[i].areaName.search(city.areaName) == 0
            ) {
              _self.areaId = resData.premisesAreaList[i].areaId;
              _self.params.areaId = _self.areaId;
            }
          }
          _self.areaName = city.areaName;
        }

        _self.params.pageNo = 0;
        _self.params.pageSize = 15;
        _self.premisesList = [];
        if (isClick) {
          _self.params.areaId = "";
          _self.areaName = "";
        }
        _self.getPremisesList();
      });
    },
    getPremisesWithArea(area) {
      var _self = this;
      _self.params.pageNo = 0;
      _self.params.pageSize = 15;
      _self.params.areaId = area.areaId;
      _self.areaName = area.areaName;
      _self.premisesList = [];
      _self.areaSelectShow = false;
      _self.getPremisesList();
    },
    ///////定位/////////////////
    wxConfig() {
      console.log(5, wx);
      //微信配置
      var currUrl = location.href.split("#")[0];
      var body = {};
      body.params = {
        url: currUrl,
      };
      var url = this.utilHelper.apiUrl + "/api/js_ticket";
      this.$http.post(url, body).then(
        (response) => {
          var data = response.body.resData;
          wx.config({
            debug: false,
            appId: data.appid, // 必填，公众号的唯一标识
            timestamp: data.time, // 必填，生成签名的时间戳
            nonceStr: data.noncestr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名，见附录1
            jsApiList: ["getLocation"],
          });
        },
        (res) => {
          this.setLocation();
        }
      );
    },
    //解析地址
    getAddress(point) {
      var _self = this;
      var geoc = new BMap.Geocoder();
      geoc.getLocation(point, function(rs) {
        var addComp = rs.addressComponents;
        _self.provinceName = addComp.province;
        _self.cityName = addComp.city;
        // _self.resultAddress = addComp.province + addComp.city +  addComp.district + addComp.street  + addComp.streetNumber
        _self.resultAddress =
          addComp.province +
          addComp.city +
          addComp.district +
          addComp.street +
          addComp.streetNumber;
        console.log(_self.resultAddress);
        _self.areaName = addComp.district;
        _self.adaptAddress(_self.cityName, _self.areaName);
      });
      //微信地址解析
    },
    goToLocation() {
      var _self = this;
      wx.getLocation({
        success: function(res) {
          var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
          //lat = res.latitude;

          var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
          var x = res.longitude;
          var y = res.latitude;
          console.log("location is lng=" + x + "  lat=" + y);
          // var result =  map.getAddress(y,x);
          var url =
            _self.utilHelper.apiUrl +
            "/weixin/getAddress?lat=" +
            y +
            "&lng=" +
            x;
          _self.$http.get(url).then((response) => {
            var data = response.body;
            if (data.status == 0) {
              _self.adaptAddress(
                data.result.ad_info.city,
                data.result.ad_info.district
              );
            }
          });
          //changCoordinate(x, y);
          //alert("location1 is lng=" + lng + "  lat=" + lat);
          // var url = "http://api.map.baidu.com/geoconv/v1/?coords=" + x + "," + y + "&from=1&to=5&ak=j2bGq5pgdwBDdhBPL9iGZO5Gcy8OHehh";
          // $.get(url, function(data) {
          //     if(data.status === 0) {
          //         var lng = data.result[0].x;
          //         var lat = data.result[0].y;
          //         //转换后的地址 定位到地图上
          //         _self.point = new BMap.Point(lng , lat);
          //         _self.getAddress(_self.point);
          //
          //     }
          // }, 'jsonp');

          var speed = res.speed; // 速度，以米/每秒计
          var accuracy = res.accuracy; // 位置精度
        },
        cancel: function(res) {},
        fail: function(res) {},
      });
    },
    //定位当前位置
    setLocation() {
      //调用微信内置定位获取坐标
      var _self = this;
      //调用ip
      var url = this.utilHelper.apiUrl + "/weixin/getAddressByIp";
      this.$http.get(url).then((response) => {
        var data = response.body;
        if (data.status == 0) {
          _self.adaptAddress(
            data.result.ad_info.city,
            data.result.ad_info.district
          );
        }
      });
    },
    initWeixin() {
      var _self = this;
      var weixinHander = true;
      var isWeixinClient = false;
      //判断客户端是否为微信
      if (/MicroMessenger/.test(window.navigator.userAgent)) {
        isWeixinClient = true;
      }
      if (isWeixinClient) {
        wx.ready(function() {
          _self.goToLocation();
        });
        wx.error(function() {
          _self.adaptAddress();
        });
      } else {
        _self.adaptAddress();
      }
    },
    adaptAddress(locationCity, locationArea) {
      console.log("address" + locationCity);
      console.log("_self.citySelectIndex ==>" + this.citySelectIndex);
      var _self = this;
      var cityName = "";
      var cityIndex = 0;
      //定位之后获取相应楼盘
      for (let i = 0; i < _self.cityList.length; i++) {
        if (
          _self.cityList[i].cityName == locationCity ||
          _self.cityList[i].cityName.search(locationCity) == 0
        ) {
          _self.citySelectIndex = i;
        }
        if (_self.cityList[i].cityId == _self.lastPremisesCityId) {
          cityIndex = i;
          cityName = _self.cityList[i].cityName;
        }
      }
      console.log("befor----->" + _self.citySelectIndex);
      if (
        (!_self.citySelectIndex && _self.citySelectIndex != 0) ||
        typeof _self.citySelectIndex == "undefined"
      ) {
        _self.citySelectIndex = -1;
      }
      console.log("after---->" + _self.citySelectIndex);
      if (_self.citySelectIndex == -1) {
        _self.cityList.unshift({
          cityId: "-1",
          cityName: locationCity,
          premisesCount: 0,
        });
        _self.premisesCount = 0;
        _self.citySelectIndex = 0;
        if (_self.lastPremisesCityId) {
          _self.citySelectIndex = cityIndex + 1;
          _self.getAreaByCity({
            cityId: _self.lastPremisesCityId,
            cityName: cityName,
          });
        } else {
          _self.getAreaByCity({
            cityId: "",
            cityName: "全部城市",
          });
        }
      } else {
        var city = _self.cityList[0];
        _self.cityList[0] = _self.cityList[_self.citySelectIndex];
        _self.cityList[_self.citySelectIndex] = city;
        //如果区域信息为空则获取城市信息
        if (locationArea) {
          _self.cityList[0].areaName = locationArea;
        }
        _self.getAreaByCity(_self.cityList[0]);
      }
    },
  },
};
</script>

<style scoped>
@import url("../../assets/css/homeBar.css");
.city-info-list li {
  padding: 10px 0;
  border-top: 1px solid #d6d6d6;
}
.city-info-list li:first-child {
  border-top: none;
}
.choice-city {
  margin: 0 -10px;
}
.choice-city,
.choice-square {
  position: relative;
  padding-left: 22px;
  padding-right: 20px;
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: #ef6154;
}
.choice-city .city-name,
.choice-square .city-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.choice-city .fa-caret-right,
.choice-square .fa-caret-right {
  position: absolute;
  right: 4px;
  bottom: -4px;
  color: #ccc;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.residential-img {
  position: relative;
  width: 100%;
  border-radius: 4px;
  height: 150px;
  overflow: hidden;
}

.residential-img img {
  width: 100%;
  height: 100%;
  position: relative;
}
.residential-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 30px;
  width: 100%;
  background-color: #000;
  opacity: 0.4;
  z-index: 3;
}
.residential-mask-info {
  position: absolute;
  bottom: 0;
  line-height: 30px;
  color: #fff;
  z-index: 9;
  width: 100%;
}
.residential-mask-info .name {
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.residential-mask-info .square {
  padding-right: 10px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-sm-6 {
  width: 50%;
  float: left;
}
.sale {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #02be9d;
  color: #fff;
  width: 44px;
  height: 20px;
  border-radius: 4px;
  text-align: center;
}
.area-location {
  background: #fff;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  width: 100%;
  z-index: 50;
  position: relative;
}
.area-location a span {
  font-size: 16px;
}
.position-icon {
  color: #908f8f;
  width: 40px;
  text-align: center;
  font-size: 20px;
  line-height: 50px;
}
.location-btn {
  background: none;
  border: none;
  font-size: 16px;
}
.text-center {
  text-align: center;
}
.fix {
  position: fixed;
  top: 0;
  left: 0;
  margin-bottom: 1px;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 0 1px #000 inset;
}
.area-select {
  width: 100%;
  max-height: 240px;
  position: absolute;
  top: 62px;
  left: 0;
  background: #fff;
  border-bottom: 1px solid #cccccc;
}
.area-select-sub {
  width: 50%;
  float: left;
  max-height: 240px;
  overflow: scroll;
}
.border-right {
  border-right: 1px solid #ccc;
}
.border-left {
  border-left: 1px solid #ccc;
}
.area-select li {
  font-size: 14px;
  padding-left: 15px;
  line-height: 40px;
  height: 40px;
}
.area-select li span {
  color: #fe9229;
}
.color-orange {
  color: #fe9229;
}
.result-warning {
  background: none;
  text-align: center;
  height: 60px;
  margin-top: 100px;
  font-size: 24px;
}
.fold {
  position: absolute;
  right: 5px;
  top: 5px;
}
.bor-r {
  border-right: 1px solid #ccc;
}
.text-center {
  text-align: center;
}
</style>